<template>
  <!-- 底部导航，完成 -->
  <div id="bottom">
    <ul class="bottom-ul flex-row-around">
      <!-- <li
        class="scanQRcode animated"
        :class="scanAnimate?'pulse':''"
        @click="clickScanQRcode()"
        tag="li"
      >
        <div class="scanQRcode-main">
          <img
            class="icon-scan"
            src="../../static/icons/icon-scan.png"
            alt=""
          />
        </div>
      </li> -->
      <router-link :to="item.to" tag="li" v-for="(item,index) in tabbarList" :key="index" class="flex-column-center">
          <div class="tabbar-img-box">
            <!-- 两个图标，不同颜色，显示其中一个 ，● 可优化-->
            <img :src="item.imgCurrent" alt="" v-if="currentIndex == item.id">
            <img :src="item.img" alt="" v-else>
          </div>
          <span class="tabbar-text-current" v-if="currentIndex == item.id">
            {{item.text}}
          </span>
          <span class="tabbar-text" v-else>{{item.text}}</span>
        </router-link>
    </ul>
  </div>
</template>
<style lang="stylus" scoped>
  .tabbar-img-box{
    height: 29px;width: 29px;
  }
  .tabbar-img-box img{
    width: 100%;height: 100%;
  }
  .tabbar-text{
    font-size:10px;
    font-family:'PingFangSC';
    font-weight:400;
    color:rgba(153,153,153,1);
}
.tabbar-text-current{
  color:#36A5F8;
}
</style>
<script>
  import { PaletteButton } from "mint-ui";

  export default {
    data() {
      return {
        active: "home",

        // 当前位数
        currentIndex:0,

        // 导航数据
        tabbarList:[
          {
            id:0,
            img:'../../static/ethel_img/tab_icon_home_nor1.png',
            imgCurrent:'../../static/ethel_img/tab_icon_home_press2.png',
            to:'/home',
            text:'首页'
          },
          {
            id:1,
            img:'../../static/ethel_img/tab_icon_msg2.png',
            imgCurrent:'../../static/ethel_img/tab_icon_msg1.png',
            to:'/classify',
            text:'分类'
          },
          {
            id:2,
            img:'../../static/ethel_img/tab_icon_scan_nor1.png',
            imgCurrent:'../../static/ethel_img/tab_icon_scan_press2.png',
            to:'/NewShop',
            text:'购物车'
          },
          {
            id:3,
            img:'../../static/ethel_img/tab_icon_message_nor1.png',
            imgCurrent:'../../static/ethel_img/tab_icon_message_press2.png',
            to:'/msg',
            text:'消息'
          },
          {
            id:4,
            img:'../../static/ethel_img/tab_icon_my_nor1.png',
            imgCurrent:'../../static/ethel_img/tab_icon_my_nor2.png',
            to:'/my',
            text:'我的'
          },
        ]
      };
    },
    components: {
      PaletteButton
    },
    mounted() {
      // 获取当前页面的标识，赋给当前值
      this.active = this.$route.path.slice(1);
      console.log(this.active)
      switch(this.active){
        case 'home':  this.currentIndex = 0; break;
        case 'classify':  this.currentIndex = 1; break;
        case 'NewShop':  this.currentIndex = 2; break;
        case 'msg':  this.currentIndex = 3; break;
        case 'my':  this.currentIndex = 4; break;
      }
    },
    methods: {
      
    }
  };
</script>

<style lang="stylus" scoped>
    #bottom
      width: 100%;
      // height: 1.4rem;
      background: yellow;
      position: fixed;
      bottom: -0.05rem;
      color: #666
      background white;
      z-index:10000;
      box-shadow:0px 1px 10px 0px rgba(224,224,224,0.7);
      .bottom-ul
        
        height: 1.5rem;
        li
          width 20%
          display: flex;
          justify-content: center;
          flex-direction: column;
          text-align center
          position relative
          span
            font-size .2rem
          i
            font-size .55rem
        .router-link:hover,.router-link-active
          color: #25b5fe;

  /* // 扫一扫动画 */
  .animated {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  @-webkit-keyframes pulse {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }

    50% {
      -webkit-transform: scale3d(1.25, 1.25, 1.25);
      transform: scale3d(1.25, 1.25, 1.25);
    }

    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

  @keyframes pulse {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }

    50% {
      -webkit-transform: scale3d(1.25, 1.25, 1.25);
      transform: scale3d(1.25, 1.25, 1.25);
    }

    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

  .pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
  }
  
</style>
<style lang="stylus">
  .scanQRcode{
    margin-top: -.5rem;
    .scanQRcode-main{
      background: #25b5fe;
      display: inline-block;
      position: relative;
      border-radius: 50%;
      width: 56px;
      height: 56px;
      line-height: 56px;
      text-align: center;
      margin: 0 auto;
    }
    .icon-scan{
      z-index: 999;
      max-width: 100%;
      padding: .4rem;
      vertical-align: bottom;
    }
  }
 
</style>
